<template>
  <el-dialog
    :title="departTitle"
    :visible="isShowDiag"
    width="40%"
    @close="cancalSubmit"
  >
    <el-form ref="form" v-loading="loading" :model="formData" :rules="formRules" label-width="120px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="formData.name" placeholder="1-50个字符" style="width:90%" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="formData.code" placeholder="1-50个字符" style="width:90%" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select v-model="formData.manager" placeholder="请选择负责人" style="width:90%" @click.native="getAllList">
          <el-option v-for="obj in allPeople" :key="obj.id" :label="obj.username" :value="obj.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="formData.introduce" placeholder="1-300个字符" type="textarea" :rows="3" style="width:90%" />
      </el-form-item>

    </el-form>
    <el-row type="flex" justify="center">
      <el-col :span="3">
        <el-button size="small" @click="cancalSubmit">取消</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="small" @click="addDepart">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getAllList, addDepartment, getDepartment, editDepartment } from '@/api/department'
import { getAllEmployee } from '@/api/employee'
export default {
  /*  model: {
    prop: 'isShowDiag'
  }, */
  props: {
    node: {
      type: Object,
      default: null
    },
    isShowDiag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkDepartRepeat = async (rule, value, callback) => {
      const { depts } = await getAllList()
      // 判断所有列表中的pid和当前节点的id相同的节点列表中的name有没有和当前这个name是否一样
      let isRepeat = false
      // 根据id来区分校验规则，存在id则是点击编辑按钮否则就是点击添加子部门
      if (this.formData.id) {
        // 编辑部门的校验在过滤时需要先将自己过滤掉
        isRepeat = depts.filter(item => item.pid === this.node.id && item.id !== this.formData.id).some(item => item.name === value)
      } else {
        isRepeat = depts.filter(item => item.pid === this.node.id).some(item => item.name === value)
      }
      return isRepeat ? callback(new Error(`${this.node.name}下有同名的子部门`)) : callback()
    }
    const checkCodeRepeat = async(rule, value, callback) => {
      const { depts } = await getAllList()
      let isRepeat = false
      if (this.formData.id) {
        // 编辑部门弹出的会话框中的查找的数据应该将自己先剔除
        isRepeat = depts.filter(item => item.pid === this.node.id).some(item => item.code === value)
      } else {
        isRepeat = depts.some(item => item.code === value)
      }
      return isRepeat ? callback(new Error('架构中存在有相同的编码')) : callback()
    }
    return {
      formData: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      formRules: {
        name: [{ required: true, trigger: 'blur', message: '部门名称不能为空' },
          { min: 1, max: 50, message: '部门名称应该是1-50个字符' },
          { trigger: 'blur', validator: checkDepartRepeat }],
        code: [{ required: true, trigger: 'blur', message: '部门编码不能为空' },
          { min: 1, max: 50, message: '部门编码应该是1-50个字符' },
          { trigger: 'blur', validator: checkCodeRepeat }],
        manager: [{ required: true, trigger: 'blur', message: '部门负责人不能为空' }],
        introduce: [{ required: true, trigger: 'blur', message: '部门介绍不能为空' },
          { min: 1, max: 300, message: '部门介绍应该是1-300个字符' }]
      },
      allPeople: [],
      loading: false
    }
  },
  computed: {
    departTitle() {
      return this.formData.id ? '编辑部门' : '添加子部门'
    }
  },
  methods: {
    // 点击确定提交添加的部门信息
    addDepart() {
      this.loading = true
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.formData.id) {
            await editDepartment(this.formData.id, this.formData)
          } else {
            await addDepartment({ ...this.formData, pid: this.node.id })
          }
          // this.$emit('input', false)
          this.$emit('addDepts')
          this.$emit('update:isShowDiag', false)
          this.loading = false
          let message = ''
          this.formData.id ? message = '修改部门信息成功' : message = '添加子部门成功'
          this.$message.success(message)
        } else {
          this.loading = false
        }
        // 关闭弹框将触发diag的close事件
      })
    },
    // 获取所有员工列表
    async getAllList() {
      this.allPeople = await getAllEmployee()
    },
    // 点击取消和x将关闭弹框
    cancalSubmit() {
      this.$emit('update:isShowDiag', false)
      // 重置表单
      this.$refs.form.resetFields()
      // 将表单信息还原，防止点了编辑之后数据有存留，导致一些操作异常
      this.formData = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
    },
    // 获取节点的相关信息
    async getDeptsInfo(id) {
      this.formData = await getDepartment(id)
    }
  }
}
</script>

<style>

</style>
